<template>
	<view class="popup popup--fixed popup-figure-info  flex--row" :class="{'active':visible}" @click="close">
		<Loading v-if="loading"></Loading>
		<template v-else>
			<PopupClose @close="close"></PopupClose>
			<view class="figure-info flex--col" >
				<view class="figure-info-item figure-info--person flex--col">
					<view class="person-intro person-intro--profile flex--row">
						<view class="intro-desc">
							<view class="intro-desc-item">
								<text class="intro-name">{{userInfo.name}}</text>
							</view>
							<view class="intro-desc-item">
								<text class="intro-career">{{userInfo.age}}岁  {{userInfo.career}}</text>
								<text class="intro-logan">{{userInfo.profile}}</text>
							</view>
						</view>
						<view class="intro-avatar ">
							<image aria-label="用户头像" mode="scaleToFill" :src="userInfo.avatar"></image>
						</view>
					</view>
					
					<view class="person-intro person-intro--summary flex--row">
						<view class="person-summary-item">
							<text class="summary-value">{{userInfo.count}}</text>
							<text class="summary-desc">出行次数</text>
						</view>
						<view class="person-summary-item">
							<text class="summary-value">{{userInfo.score}}</text>
							<text class="summary-desc">出行评分</text>
						</view>
						<view class="person-summary-item">
							<text class="summary-value">{{userInfo.often}}</text>
							<text class="summary-desc">最常出游</text>
						</view>
					</view>
					
					<view class="person-intro person-intro--route flex--row">
						<view class="summary-date" v-for="comment in userInfo.travelDateList" :key="comment.travelId" :class="{'active':curComment.travelId === comment.travelId}" @click.stop="changeComment(comment.travelId)">
							<text class="text--sub-dark">{{comment.travelDate}}</text>
						</view>
					</view>
				</view>
				
				<view class="figure-info-item figure-info--feedback flex--col">
					<EmptyWarn v-if="curComment === null">该用户暂时还没有出行过</EmptyWarn>
					<template v-else>
						<view class="feedback-heading flex--row">
							<text class="heading-title  text--main-dark">用户评价</text>
							<view class="heading-summary">
								<text class="text--sub-dark">{{curComment.userEvaluateRouteInfoVO.distance}}Km</text>
								<text class="text--sub-dark">{{curComment.userEvaluateRouteInfoVO.time}}h</text>
							</view>
						</view>
						<view class="feedback-content">
							<view class="feedback-content-item flex--col" v-for="(commentItem,index) in curComment.userEvaluateInfoVOList" :key="index">
								<text class="text--secondary-dark">{{commentItem.name}}</text>
								<text class="text--sub-dark">{{commentItem.comment}}</text>
							</view>
							
						</view>
						<view class="feedback-pictures flex--row" v-show="curComment.userEvaluateInfoVOList.imgList.length > 0">
							<view class="picture-item">
								<image mode="scaleToFill" src="@/static/图片.png" ></image>
							</view>
							<view class="picture-item">
								<image mode="scaleToFill" src="@/static/图片.png" ></image>
							</view>
							<view class="picture-item">
								<image mode="scaleToFill" src="@/static/图片.png" ></image>
							</view>
						</view>
					</template>
				</view>
			</view>
		</template>
		
	</view>
</template>

<script>
	import * as UserApi from "@/api/user/user.js"
	import Loading from "@/components/Loading/Loading.vue"
	import EmptyWarn from "@/components/EmptyWarn/EmptyWarn.vue"
	import PopupClose from "@/components/PopupClose/PopupClose.vue"
	import {dateFormat} from "@/utils/util.js"
	
	export default{
		components:{
			EmptyWarn,
			Loading,
			PopupClose
		},
		data(){
			return {
				userInfo:null,
				loading:true,
				visible:false,
				curComment:null
			}
		},
		methods:{
			async changeComment(travelId){
				if(this.curComment.travelId === travelId){
					return
				}
				await this.getCommentInfo(travelId)
			},
			async getCommentInfo(travelId){
				 this.curComment = await UserApi.commentInfo(travelId)
				 this.curComment.travelId = travelId
				 
			},
			async getUserInfo(userId){
				this.loading = true
				this.userInfo = await UserApi.briefInfo(userId)
				if(this.userInfo.travelDateList.length > 0){
					await this.getCommentInfo(this.userInfo.travelDateList[0].travelId)
				}
				this.loading = false
			},
			async open(userId){
				this.visible = true
				await this.getUserInfo(userId)
			},
			close(){
				this.visible = false
				this.userInfo = null
				this.curComment = null
			}
		
		},
	}
	
</script>

<style lang="scss">
	
	.text--sub-grey{
		font-size:14px;
		color:#777;	
	}
	
	.text--sub-dark{
		font-size:14px;
		color:#333;	
	}
	
	.text--secondary-dark{
		font-size:18px;
		color:#333;
		font-weight: 700;
	}
	
	.text--main-dark{
		font-size:22px;
		color:#333;
		font-weight: 700;
	}
	
	.popup-figure-info{
		transform: translate(-50%,-50%);
		top:50%;
		left:50%;
		width:100%;
		height:100vh;
		background-color:rgba(255,255,255,0.8);
		
		justify-content: center;
		align-items: center;
		
		display:none;
		&.active{
			display:flex;
			flex-direction: column;
		}
	}
	
	.figure-info{
		width:90%;
		transform:translateY(0%);
		opacity: 100%;
		transition: all 0.4s;
		align-items: center;
		gap:20px;
		
		&-item{
			background-color: #ffffff;
			@include border-four-roundings
			width:90%;
			padding:20px;
		}
		
		&--person{
			gap:12px;
			
			.person-intro{
					text{
						display: block;
						line-height: 1.4;	
					}
				
					&--profile{
						justify-content:space-between;
						align-items: center;
						.intro-desc-item{
							margin-bottom: 12px;
						}
						
						.intro-name{
							font-size:24px;
							font-weight:600;
							color:#333;
						}
						
						.intro-logan{
							font-size: 16px;
							color:#555;
							font-weight:100;
							letter-spacing:0.6px;
							
						}
						.intro-career{
							font-size: 16px;
							color:#777;
						}
					
						.intro-avatar{
							border-radius: 50%;
							overflow: hidden;
							height:64px;
							width:64px;
							
							image{
								width:100%;
								height: 100%;
							}
						}
					}
					
					&--summary{
						justify-content: space-around;
						align-items: flex-end;
						.person-summary-item{
							  flex:1;
							  text-align: left;
							  color:#666;
			
							 .summary-value{
								color:#444;
								font-size: 20px;
							 }
							 
							 .summary-desc{
								font-size: 14px;
								font-weight: 100;
							 }
						}
					
					}
					&--route{
						justify-content: space-around;
						gap:0px;
						.summary-date{
							font-weight: 600;
							padding:4px;
							
							&.active{
								@include border-four-roundings;
								background-color: #333;
								text {
									color:#fff;
								}
							}
						}
					}
			}
			
		}
		
		&--feedback{
			gap:12px;
			
			.feedback-heading{
				justify-content: space-between;
				align-items: center;
			}
			
			.feedback-content{
				&-item{
					gap:12px;
					margin-bottom: 24px;
				}
			}
			
			.feedback-pictures{
				width:100%;
				justify-content: space-between;
			}
			
			.picture-item{
				flex-basis:90px;
				height:50px;
				border-radius: 10px;
				overflow:hidden;
				
				image{
					width:100%;
					height:100%;
				}
			}
			
			.heading-summary{
				@include border-four-roundings;
				padding:6px;

				& > text{
					margin-right:4px;
					font-weight: 600;
				}
				
				& text:last-child{
					margin-right:0px;
				}
			}

		}
	}
	
</style>